<template>
  <div>
    <!-- <h1>企业数据</h1> -->
      
    <div class="q5">

      <h2 class="q1">数据总览</h2>
    <span class="q2">查看详情</span>

    <div class="q3">
      <div class="q6">
        <img :src="img.q" alt="">
        <span class="q7">当前通话总并发数 &emsp13;&emsp13;&emsp13;<span class="q8">0</span></span>
        <span class="q9">今日最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q11">1</span></span>
        <span class="q10">历史最高通话并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q12">1291</span></span>
      </div><br><br>
      <span class="q13">docker1 </span><br>
      <span class="q13">develop </span><br>
      <span class="q13">sdet0320 </span><br>
      <span class="q13">0418 </span><br>
      <span class="q13">shengy618</span>

      <ul class="q14">
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>

    </div>
    <div class="q4">
      <div class="q15">
          <img :src="img.w" alt="">
        <span class="q7">当前线路总并发数 &emsp13;&emsp13;&emsp13;<span class="q8">3</span></span>
        <span class="q9">今日最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q11">8</span> &emsp13;<span class="q16">(电路6 &emsp13; 网络2)</span></span>
        <span class="q10">历史最高线路并发数 &emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;&emsp13;<span class="q12">2151</span> &emsp13;<span class="q16">(电路72 &emsp13; 网络2079)</span></span>
        <span class="q17">(电路2 &emsp13; 网络1)</span>
      </div><br><br>
       <span class="q13">docker1 </span><br>
      <span class="q13">develop </span><br>
      <span class="q13">sdet0320 </span><br>
      <span class="q13">0418 </span><br>
      <span class="q13">shengy618</span>

      <ul class="q14">
        <li>3</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>

    </div>

   <div ref="chart" style="width: 600px; height: 400px;" class="q18"></div>

  </div>

  </div>
</template>

<script>

import q from "../assets/微信图片_20250701161142.png"
import w from '../assets/微信图片_20250701172153.png'


import {tuniao} from '@/utlis/https'

export default {

  data() {
    return {
      img:{
        q,
        w
      },

      ar:''

    }
  },
  mounted() {
    tuniao()
    .then((val) =>{
      console.log(val);
      this.ar = val.data.arr
      console.log(this.ar);
      
    })
    .catch((e) =>{
      console.log(e);
    })

    this.initChart()
  },
  methods: {
    initChart() {
      // 获取DOM节点
      const chartDom = this.$refs.chart
      // 初始化图表
      const myChart = this.$echarts.init(chartDom)
      
      // 配置项
      const option = {
        title: {
          text: 'ECharts 图表'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [9, 10, 46, 10, 10, 20]
          }
        ]
      }
      
      // 使用配置项显示图表
      myChart.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang='less' scoped>
.q1{
  position: absolute;
  left: 30px;
}
.q2{
  position: absolute;
  left: 135px;
  top: 25px;
  color: rgb(34,157,255);
  cursor: pointer;
}
.q3{
  width: 600px;
  height: 330px;
  background-color: rgb(250,250,250);
  position: absolute;
  top: 70px;
  left: 35px;
}
.q4{
  width: 600px;
  height: 330px;
  background-color: rgb(250,250,250);
  // background-color: aqua;
  position: absolute;
  right: 36px;
  top: 70px;
}
.q5{
  width: 1300px;
  height: 605px;
  // background-color: aqua;
  // border: solid black 1px;
  background-color: rgb(247,247,247);
  position: relative;
  overflow-y: auto; /* 仅垂直方向自动滚动 */
}
.q6{
  width: 600px;
  height: 150px;
  background-color:white;
  border-bottom: 1px solid rgb(220, 220, 223);
  position: relative;
}
.q6 img {
  position: absolute;
  top: 35px;
  left: 20px;
}
.q7{
  font-size: 20px;
  position: absolute;
  left: 145px;
  top: 20px;
}
.q8 {
  font-size: 28px;
}
.q9{
  color: rgb(103,103,103);
  position: absolute;
  left: 146px;
  top: 65px;
}
.q10{
  color: rgb(103,103,103);
  position: absolute;
  left: 146px;
  top: 95px;
}
.q11{
  color: black;
}
.q12{
  color: black;
}
.q13{
  color: rgb(160,169,173);
}
.q14{
  color: rgb(105,102,117);
  position: absolute;
  right: 20px;
  top: 175px;
}
li{
  list-style: none;
}
.q15{
  width: 600px;
  height: 150px;
  background-color:white;
  border-bottom: 1px solid rgb(220, 220, 223);
  position: relative;
}
.q16{
  color: rgb(157,190,213);
}
.q17{
  position: absolute;
  left: 355px;
  top: 30px;
  color: rgb(157,190,213);

}
.q18{
  position: absolute;
  top: 500px;
  left: 100px;
}

</style>